import type { IconGroup } from 'types/editor'
import { ReplaceMode } from '@meta2d/chart-diagram'
import { EventAction } from '@meta2d/core'
import { getAssetURL } from '@/utils/functions'
// const modules = import.meta.glob('/src/assets/resource/**')  // 这里可以写 @ (路径别名) 或者 /src (绝对或相对路径)

const getURL = (url: string) => {
  return getAssetURL('../assets/resource' + url)
}

// const getURL = async (url: string) => {
//   // return getAssetURL('../assets/resource' + url)
//   const path = `/src/assets/resource${url}` // 这里不可以写路径别名，只可以写绝对或者相对路已经
//   console.log(modules[path]);

//   return modules[path]
// }
/**
 * pen类型
 */
export enum PenType {
  Node = 0,
  Line = 1,
  All = 2
}

//动画展示的目标
export const AnimationsEventAction = [EventAction.StartAnimate, EventAction.PauseAnimate, EventAction.StopAnimate]

/**
 * 连线类型
 */
export const LineType = {
  曲线: 'curve',
  折线: 'polyline',
  直线: 'line',
  脑图曲线: 'mind'
}

export enum LineTypeIcon {
  '曲线' = 't-curve2',
  '折线' = 't-polyline',
  '直线' = 't-line',
  '脑图曲线' = 't-mind'
}

//线条样式
export const StrokeType = [
  { value: 0, label: '无' },
  { value: 1, label: '线条渐变' }
]

/**
 * 连线端点样式
 */
export const LineEndsType = [
  '',
  'triangle',
  'diamond',
  'circle',
  'triangleSolid',
  'diamondSolid',
  'circleSolid',
  'lineDown',
  'lineUp',
  'line'
]

//锚点
export const AnchorsHandType = {
  addAnchorHand: '添加手柄',
  removeAnchorHand: '删除手柄',
  toggleAnchorHand: '切换手柄类型'
}

/**
 * 编辑器激活状态
 */
export enum EditorActiveType {
  CanvasActive = 0,
  PenActive = 1,
  CombineActive = 2
}

/**
 * ColorPicker preDefine
 */
export const ColorPredefine = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
  '#ffffff00'
]

/**
 * icons工具栏配置文件
 */
export const IconGroups: IconGroup[] = [
  {
    groupName: '基础组件',
    icons: [
      {
        id: 1,
        name: '正方形',
        icon: 't-rect',
        pen: {
          name: 'rectangle',
          text: '正方形',
          width: 100,
          height: 100
        }
      },
      {
        id: 2,
        name: '矩形',
        icon: 't-rectangle',
        pen: {
          name: 'rectangle',
          text: '矩形',
          width: 200,
          height: 50,
          borderRadius: 8
        }
      },
      {
        id: 3,
        name: '圆',
        icon: 't-circle',
        pen: {
          name: 'circle',
          text: '圆',
          width: 100,
          height: 100
        }
      },
      {
        id: 4,
        name: '三角形',
        icon: 't-triangle',
        pen: {
          name: 'triangle',
          text: '三角形',
          width: 100,
          height: 100
        }
      },
      {
        id: 5,
        name: '菱形',
        icon: 't-diamond',
        pen: {
          name: 'diamond',
          text: '菱形',
          width: 100,
          height: 100
        }
      },
      {
        id: 6,
        name: '五边形',
        icon: 't-pentagon',
        pen: {
          name: 'pentagon',
          text: '五边形',
          width: 100,
          height: 100
        }
      },
      {
        id: 7,
        name: '六边形',
        icon: 't-hexagon',
        pen: {
          name: 'hexagon',
          text: '六边形',
          width: 100,
          height: 86.6
        }
      },
      {
        id: 8,
        name: '五角星',
        icon: 't-pentagram',
        pen: {
          name: 'pentagram',
          text: '五角星',
          width: 100,
          height: 100
        }
      },
      {
        id: 9,
        name: '左箭头',
        icon: 't-arrow-left',
        pen: {
          name: 'leftArrow',
          text: '左箭头',
          width: 100,
          height: 40
        }
      },
      {
        id: 10,
        name: '右箭头',
        icon: 't-arrow-right',
        pen: {
          name: 'rightArrow',
          text: '右箭头',
          width: 100,
          height: 40
        }
      },
      {
        id: 11,
        name: '双箭头',
        icon: 't-twoway-arrow',
        pen: {
          name: 'twowayArrow',
          text: '双箭头',
          width: 100,
          height: 40
        }
      },
      {
        id: 12,
        name: '云',
        icon: 't-cloud',
        pen: {
          name: 'cloud',
          text: '云',
          width: 100,
          height: 85
        }
      },
      // {
      //   id: 13,
      //   name: '消息框',
      //   icon: 't-msg',
      //   pen: {
      //     name: 'message',
      //     text: '消息框',
      //     width: 100,
      //     height: 80
      //   }
      // },
      // {
      //   id: 14,
      //   name: '图片',
      //   icon: 't-image',
      //   pen: {
      //     name: 'image',
      //     width: 100,
      //     height: 100,
      //     text: '请在操作区设置你的图片链接',
      //     image: 'http://xxx.com',
      //     imageRatio: false
      //   }
      // },
      // {
      //   id: 15,
      //   name: '文本',
      //   icon: 't-text',
      //   pen: {
      //     name: 'text',
      //     text: '文本',
      //     width: 100,
      //     height: 36
      //   }
      // },
      {
        id: 16,
        name: '线',
        icon: 't-line',
        pen: {
          name: 'line',
          text: '线',
          width: 100,
          height: 100,
          lineWidth: 1
        }
      },
      // {
      //   id: 17,
      //   name: '立方体',
      //   icon: 't-cube',
      //   pen: {
      //     name: 'cube',
      //     width: 48,
      //     height: 80,
      //     lineWidth: 1,
      //     fontSize: 12,
      //     lineHeight: 1.5,
      //     rotate: 0
      //   }
      // },
      // {
      //   id: 18,
      //   name: '人',
      //   icon: 't-people',
      //   pen: {
      //     name: 'people',
      //     width: 56,
      //     height: 80,
      //     lineWidth: 1,
      //     fontSize: 12,
      //     lineHeight: 1.5,
      //     rotate: 0
      //   }
      // },
      // {
      //   id: 19,
      //   name: '分享',
      //   icon: 'icon-share',
      //   pen: {
      //     name: 'image',
      //     width: 80,
      //     height: 80,
      //     icon: '\ue6f3',
      //     iconFamily: 'iconfont',
      //     lineWidth: 1,
      //     fontSize: 12,
      //     lineHeight: 1.5,
      //     rotate: 0
      //   }
      // },
      // {
      //   name: '视频',
      //   icon: 't-pc',
      //   id: 20,
      //   pen: {
      //     width: 200,
      //     height: 200,
      //     externElement: true,
      //     name: 'video',
      //     text: '请在操作区设置你的视频链接',
      //     video: 'http://xxx.com'
      //   }
      // },
      // {
      //   name: '网页',
      //   icon: 't-02',
      //   id: 21,
      //   pen: {
      //     name: 'iframe',
      //     width: 100,
      //     height: 100,
      //     externElement: true,
      //     text: '请在操作区设置你的网页链接',
      //     iframe: 'http://xxx.com',
      //     props: [{ title: '网页地址', type: 'input', prop: 'iframe', event: 'change' }]
      //   }
      // },
      // {
      //   name: 'gif',
      //   icon: 't-image',
      //   id: 21,
      //   pen: {
      //     name: 'gif',
      //     width: 100,
      //     height: 100,
      //     text: '请在操作区设置你的gif链接',
      //     image: 'http://xxx.com',
      //     imageRatio: false
      //   }
      // },
      // {
      //   id: 22,
      //   name: '周',
      //   icon: 't-text',
      //   pen: {
      //     name: 'text',
      //     text: '',
      //     width: 100,
      //     height: 36,
      //     form: [
      //       {
      //         key: "text",
      //         dataIds: {
      //           dataId: "LocWeek",
      //         },
      //       },
      //     ],
      //   }
      // },
      // {
      //   id: 23,
      //   name: '时间',
      //   icon: 't-text',
      //   pen: {
      //     name: 'text',
      //     text: '',
      //     width: 100,
      //     height: 36,
      //     form: [
      //       {
      //         key: "text",
      //         dataIds: {
      //           dataId: "LocTime",
      //         },
      //       },
      //     ],
      //   }
      // },
      // {
      //   id: 24,
      //   name: '全部时间',
      //   icon: 't-text',
      //   pen: {
      //     name: 'text',
      //     text: '',
      //     width: 100,
      //     height: 36,
      //     form: [
      //       {
      //         key: "text",
      //         dataIds: {
      //           dataId: "LocAllTime",
      //         },
      //       },
      //     ],
      //   }
      // },
    ]
  },
  {
    groupName: '动态组件',
    icons: [
      {
        name: '按钮',
        icon: 't-anniu',
        pen: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          target: 'mind',
          text: '按钮',
          activeBackground: '#40a9ff',
          activeColor: '#40a9ff',
          background: '#1890ff',
          color: '#1890ff',
          hoverBackground: '#40a9ff',
          hoverColor: '#40a9ff',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff'
        }
      },
      {
        id: 15,
        name: '文本',
        icon: 't-text',
        pen: {
          name: 'text',
          text: '文本',
          width: 100,
          height: 36
        }
      },
      {
        name: '开关',
        icon: 't-kaiguan',
        pen: {
          name: 'switch',
          disableAnchor: true,
          height: 30,
          width: 60,
          checked: true,
          offColor: '#BFBFBF',
          onColor: '#1890ff',
          disableOffColor: '#E5E5E5',
          disableOnColor: '#A3D3FF',
          hoverBackground: '#40a9ff',
          form: [
            {
              key: 'checked',
              name: '开关状态',
              type: 'switch'
            }
          ]
        }
      },
      {
        name: '网页',
        icon: 't-02',
        id: 21,
        pen: {
          name: 'iframe',
          width: 100,
          height: 100,
          externElement: true,
          text: '请在操作区设置你的网页链接',
          iframe: 'http://xxx.com',
          props: [{ title: '网页地址', type: 'input', prop: 'iframe', event: 'change' }]
        }
      },
      {
        name: '监控',
        icon: 't-pc',
        id: 20,
        pen: {
          width: 200,
          height: 200,
          externElement: true,
          name: 'video',
          text: '请在操作区设置你的监控链接',
          video: 'http://xxx.com'
        }
      },
      {
        id: 14,
        name: '图片',
        icon: 't-image',
        pen: {
          name: 'image',
          width: 100,
          height: 100,
          text: '请在操作区设置你的图片链接',
          image: 'http://xxx.com',
          imageRatio: false
        }
      },
      {
        id: 24,
        name: '时间',
        icon: 't-text',
        pen: {
          name: 'time',
          text: '2024年6月27日 9时22分35秒',
          width: 100,
          height: 36,
          form: [
            {
              key: "text",
              dataIds: {
                dataId: "LocAllTime",
              },
            },
          ],
        }
      },
      {
        name: '表格',
        icon: 't-biaoge',
        pen: {
          name: 'table',
          x: 100,
          y: 100,
          width: 0,
          height: 0,
          disableAnchor: true,
          colWidth: 150,
          rowHeight: 40,
          replaceMode: 2,
          data: [
            ['设备 ID', '设备名称', '数据协议', '状态'],
            ['1', '200', 'MQTT', '正在运行'],
            ['2', '湿度传感器', 'MQTT', '正在运行'],
            ['3', '物联网设备', 'MQTT', '正在运行'],
            ['4', '物联网设备/智能家居/智慧城市', 'MQTT', '正在运行']
          ],
        }
      }, {
        name: '滚动表格',
        icon: 't-biaoge',
        pen: {
          name: 'table',
          x: 100,
          y: 100,
          width: 0,
          height: 0,
          disableAnchor: true,
          // colWidth: 90,
          // rowHeight: 32,
          bordered: false,
          vLine: false,
          hLine: false,
          swiper: true,
          disableSize: false,
          hasHeader: true,
          stripe: true,
          stripeColor: '#407FFF1F', //'#15181c',
          textColor: '#000',
          maxNum: 11,
          replaceMode: 2,
          data: [
            ["序号", "时间", "事件内容", "处理状态"],
            [{ "text": "1" }, "2023-06-17 13:50", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
            [{ "text": "2" }, "2023-06-17 13:51", "事件内容", { "text": "已完成", "textColor": "#B3D1FFFF" }],
            [{ "text": "3" }, "2023-06-17 13:52", "事件内容", { "text": "待处理", "textColor": "#E6A82EFF" }],
            [{ "text": "4" }, "2023-06-17 13:53", "事件内容", { "text": "已完成", "textColor": "#B3D1FFFF" }],
            [{ "text": "5" }, "2023-06-17 13:54", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
            [{ "text": "6" }, "2023-06-17 13:55", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
          ],
          styles: [],
        }
      },
    ]
  },
  {
    groupName: '表单组件',
    icons: [
      {
        name: '折线图',
        icon: 't-line-chart',
        pen: {
          name: 'echarts',
          width: 400,
          height: 300,
          externElement: true,
          disableAnchor: true,
          echarts: {
            name: 'lineChart',
            option: {
              grid: {
                top: 10,
                bottom: 50,
                left: 40,
                right: 5
              },
              dataZoom: [
                {
                  height: 16,
                  bottom: 10
                }
              ],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  fontSize: 12
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  fontSize: 12
                }
              },
              series: [
                {
                  data: [],
                  type: 'line'
                }
              ]
            },
            replaceMode: 2,
            max: 100
          }
        }
      },
      {
        name: '柱状图',
        icon: 't-bar-chart',
        pen: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            name: 'barChart',
            option: {
              color: ['#1890ff', '#2FC25B', '#FACC14', '#c23531', '#2f4554', '#61a0a8', '#d48265'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: [],
                axisTick: {
                  alignWithLabel: true
                }
              },
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '',
                  type: 'bar',
                  barWidth: '50%',
                  data: []
                }
              ]
            },
            replaceMode: 2,
            max: 100
          }
        }
      },
      {
        name: '饼图',
        icon: 't-pie-chart',
        pen: {
          width: 200,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            name: 'pieChart',
            option: {
              tooltip: {
                trigger: 'item',
                // formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {},
              series: [
                {
                  name: '',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: [
                    { value: 1048, name: 'Baidu' },
                    { value: 335, name: 'Direct' },
                    { value: 310, name: 'Email' },
                    { value: 251, name: 'Google' },
                    { value: 234, name: 'Union Ads' },
                    { value: 147, name: 'Bing' },
                    { value: 135, name: 'Video Ads' },
                    { value: 102, name: 'Others' }
                  ]
                }
              ]
            },
            replaceMode: 2
          },
        }
      },
      {
        name: '仪表盘',
        icon: 't-dashboard-chart',
        pen: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            name: 'dashboardChart',
            option: {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}'
              },
              series: [
                {
                  type: 'gauge',
                  min: 0,
                  max: 100,
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 18,
                    itemStyle: {
                      color: '#FAC858'
                    }
                  },
                  pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 8,
                    length: '80%',
                    offsetCenter: [0, '8%']
                  },
                  progress: {
                    show: true,
                    overlap: true,
                    roundCap: true
                  },
                  axisLine: {
                    roundCap: true
                  },
                  data: [
                    {
                      value: 20,
                      name: 'Good',
                      title: {
                        offsetCenter: ['-40%', '80%']
                      },
                      detail: {
                        offsetCenter: ['-40%', '95%']
                      }
                    },
                    {
                      value: 40,
                      name: 'Better',
                      title: {
                        offsetCenter: ['0%', '80%']
                      },
                      detail: {
                        offsetCenter: ['0%', '95%']
                      }
                    },
                    {
                      value: 60,
                      name: 'Perfect',
                      title: {
                        offsetCenter: ['40%', '80%']
                      },
                      detail: {
                        offsetCenter: ['40%', '95%']
                      }
                    }
                  ],
                  title: {
                    show: false,
                    fontSize: 14
                  },
                  detail: {
                    show: false,
                    width: 40,
                    height: 14,
                    fontSize: 14,
                    color: '#fff',
                    backgroundColor: 'inherit',
                    borderRadius: 3,
                    formatter: '{value}'
                  }
                }
              ]
            },
            replaceMode: 2
          }
        }
      },
      // {
      //   name: '水波图',
      //   icon: 't-dashboard-chart',
      //   pen: {
      //     width: 300,
      //     height: 300,
      //     disableAnchor: true,
      //     externElement: true,
      //     name: 'echarts',
      //     echarts: {
      //       name: '',
      //       option: {
      //         series: [
      //           {
      //             name: '自定义盒子',
      //             type: 'liquidFill',
      //             phase: 0.1,
      //             amplitude: 10,
      //             data: [
      //               {
      //                 value: 0.5,
      //                 name: '2-1',
      //                 itemStyle: {
      //                   color: '#136CEA'
      //                 }
      //               },
      //               // {
      //               //   value: 0.4,
      //               //   name: '2-2',
      //               //   itemStyle: {
      //               //     color: '#4D8EE8'
      //               //   }
      //               // }
      //             ],
      //             shape: 'circle', // 水球形状  'circle'， 'rect'， 'roundRect'， 'triangle'， 'diamond'， 'pin'， 'arrow'，'container'
      //             // 波浪颜色
      //             itemStyle: {
      //               shadowBlur: 5
      //             },
      //             backgroundStyle: {
      //               borderWidth: 5,
      //               borderColor: '#056CFC'
      //             },

      //             outline: {
      //               show: false
      //             },
      //             // 水波图标签配置
      //             label: {
      //               show: true,
      //               align: 'center',
      //               distance: 50,
      //               color: '#05FCF6',
      //               fontSize: 32,
      //               insideColor: 'red'
      //             }
      //           }
      //         ]
      //       },
      //       replaceMode: 2,
      //       max: 100
      //     },
      //     form: [
      //       {
      //         key: "dataY",
      //         dataIds: [
      //           // { dataId: "2-2", name: '2-2' },
      //           { dataId: "2-1", name: '2-1' },
      //         ]
      //       }
      //     ],
      //   }
      // },
    ]
  },
  {
    groupName: '边框组件',
    icons: [
      {
        name: '边框1',
        img: getURL('/icon_module/image/border/1.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框2',
        img: getURL('/icon_module/image/border/2.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框3',
        img: getURL('/icon_module/image/border/3.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框4',
        img: getURL('/icon_module/image/border/4.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框5',
        img: getURL('/icon_module/image/border/5.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框6',
        img: getURL('/icon_module/image/border/6.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框7',
        img: getURL('/icon_module/image/border/7.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框8',
        img: getURL('/icon_module/image/border/8.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框9',
        img: getURL('/icon_module/image/border/9.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框10',
        img: getURL('/icon_module/image/border/10.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border10.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框11',
        img: getURL('/icon_module/image/border/11.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border11.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '边框12',
        img: getURL('/icon_module/image/border/12.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/border12.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '装饰组件',
    icons: [
      {
        name: '装饰1',
        img: getURL('/icon_module/image/adorn/1.png'),
        pen: {
          height: 200,
          width: 200,
          image: getURL('/svg/adorn1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰2',
        img: getURL('/icon_module/image/adorn/2.png'),
        pen: {
          height: 20,
          width: 200,
          image: getURL('/svg/adorn2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰3',
        img: getURL('/icon_module/image/adorn/3.png'),
        pen: {
          height: 20,
          width: 200,
          image: getURL('/svg/adorn3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰4',
        img: getURL('/icon_module/image/adorn/4.png'),
        pen: {
          height: 50,
          width: 200,
          image: getURL('/svg/adorn4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰5',
        img: getURL('/icon_module/image/adorn/5.png'),
        pen: {
          height: 50,
          width: 200,
          image: getURL('/svg/adorn5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰6',
        img: getURL('/icon_module/image/adorn/6.png'),
        pen: {
          height: 50,
          width: 200,
          image: getURL('/svg/adorn6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '装饰7',
        img: getURL('/icon_module/image/adorn/7.png'),
        pen: {
          height: 50,
          width: 200,
          image: getURL('/svg/adorn7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  }
  // {
  //   groupName: '表单',
  //   icons: [
  //     {
  //       name: '滚动表格',
  //       icon: 't-biaoge',
  //       pen: {
  //         name: 'table2',
  //         x: 100,
  //         y: 100,
  //         width: 0,
  //         height: 0,
  //         disableAnchor: true,
  //         colWidth: 90,
  //         // rowHeight: 32,
  //         bordered: false,
  //         vLine: false,
  //         hLine: false,
  //         swiper: true,
  //         disableSize: false,
  //         hasHeader: true,
  //         stripe: true,
  //         stripeColor: '#407FFF1F', //'#15181c',
  //         textColor: '#000',
  //         maxNum: 6,
  //         // replaceMode: 2,
  //         data: [
  //           ["序号", "时间", "事件内容", "处理状态"],
  //           [{ "text": "1" }, "2023-06-17 13:50", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
  //           [{ "text": "2" }, "2023-06-17 13:51", "事件内容", { "text": "已完成", "textColor": "#B3D1FFFF" }],
  //           [{ "text": "3" }, "2023-06-17 13:52", "事件内容", { "text": "待处理", "textColor": "#E6A82EFF" }],
  //           [{ "text": "4" }, "2023-06-17 13:53", "事件内容", { "text": "已完成", "textColor": "#B3D1FFFF" }],
  //           [{ "text": "5" }, "2023-06-17 13:54", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
  //           [{ "text": "6" }, "2023-06-17 13:55", "事件内容", { "text": "处理中", "textColor": "#05CFF9FF" }],
  //         ],
  //         styles: [
  //           {
  //             "col": 1,
  //             "width": 112
  //           },
  //           {
  //             "col": 2,
  //             "width": 112
  //           },
  //           {
  //             "col": 3,
  //             "pens": [
  //               {
  //                 "disableAnchor": true,
  //                 "fontSize": 0.6,
  //                 "lineWidth": 0,
  //                 "name": "rectangle",
  //                 "textColor": "#05CFF9FF",
  //                 "width": 56
  //               }
  //             ],
  //             "width": 70
  //           },
  //           {
  //             "col": 0,
  //             "pens": [
  //               {
  //                 "background": "#4583FF33",
  //                 "disableAnchor": true,
  //                 "isBottom": false,
  //                 "lineWidth": 0,
  //                 "name": "rectangle",
  //                 "width": 112
  //               }
  //             ],
  //             "width": 120
  //           }
  //         ],
  //         form: [
  //           {
  //             key: "data",
  //             dataIds:
  //               { dataId: "tabaleData1" }
  //           }
  //         ],
  //       }
  //     },
  //     {
  //       name: '表格',
  //       icon: 't-biaoge',
  //       pen: {
  //         name: 'table2',
  //         x: 100,
  //         y: 100,
  //         width: 0,
  //         height: 0,
  //         disableAnchor: true,
  //         colWidth: 150,
  //         rowHeight: 40,
  //         replaceMode: 2,
  //         data: [
  //           ['设备 ID', '设备名称', '数据协议', '状态', '操作'],
  //           ['1', '200', 'MQTT', '正在运行', {}],
  //           ['2', '湿度传感器', 'MQTT', '正在运行', {}],
  //           ['3', '物联网设备', 'MQTT', '正在运行', {}],
  //           ['4', '物联网设备/智能家居/智慧城市', 'MQTT', '正在运行', {}]
  //         ],
  //         styles: [
  //           {
  //             row: 1,
  //             col: 1,
  //             color: '#ff0000',
  //             background: '#ffff00',
  //             wheres: [
  //               //触发条件 成立后才允许配置样式
  //               {
  //                 comparison: '<=',
  //                 value: '123'
  //               }
  //             ]
  //           },
  //           {
  //             row: 0,
  //             height: 60
  //           },
  //           {
  //             col: 4,
  //             width: 200, //为该列设置额外的节点
  //             pens: [
  //               {
  //                 name: 'rectangle',
  //                 width: 50,
  //                 height: 20,
  //                 text: '编辑',
  //                 fontSize: 0.6,
  //                 disableAnchor: true,
  //                 activeBackground: '#40a9ff',
  //                 activeColor: '#40a9ff',
  //                 background: '#1890ff',
  //                 color: '#1890ff',
  //                 hoverBackground: '#40a9ff',
  //                 hoverColor: '#40a9ff',
  //                 textColor: '#ffffff',
  //                 hoverTextColor: '#ffffff',
  //                 activeTextColor: '#ffffff',
  //                 events: [
  //                   {
  //                     action: 5,
  //                     name: 'click',
  //                     value: 'alert("点击了编辑")'
  //                   }
  //                 ]
  //               },
  //               {
  //                 name: 'rectangle',
  //                 width: 80,
  //                 height: 20,
  //                 text: '实时数据',
  //                 fontSize: 0.6,
  //                 disableAnchor: true,
  //                 activeBackground: '#40a9ff',
  //                 activeColor: '#40a9ff',
  //                 background: '#1890ff',
  //                 color: '#1890ff',
  //                 hoverBackground: '#40a9ff',
  //                 hoverColor: '#40a9ff',
  //                 textColor: '#ffffff',
  //                 hoverTextColor: '#ffffff',
  //                 activeTextColor: '#ffffff',
  //                 events: [
  //                   {
  //                     action: 5,
  //                     name: 'click',
  //                     value:
  //                       'let parent = context.meta2d.findOne(pen.parentId);console.log("当前行数据:",parent.pen[pen.row])'
  //                   }
  //                 ]
  //               }
  //             ]
  //           }
  //         ],
  //         form: [
  //           {
  //             key: "dataY",
  //             dataIds:
  //               { dataId: "tabaleData" }
  //           }
  //         ],
  //       }
  //     },
  //     {
  //       name: '复选框',
  //       icon: 't-xuanzeqi',
  //       pen: {
  //         name: 'checkbox',
  //         width: 100,
  //         height: 30,
  //         fontSize: 16,
  //         disableAnchor: true,
  //         direction: 'vertical',
  //         checked: true,
  //         // isForbidden: true,
  //         value: '选项一',
  //         form: [
  //           {
  //             key: 'checked',
  //             name: '选中',
  //             type: 'switch'
  //           },
  //           {
  //             key: 'isForbidden',
  //             name: '是否禁用',
  //             type: 'switch'
  //           },
  //           {
  //             key: 'value',
  //             name: '选项值',
  //             type: 'text'
  //           }
  //         ]
  //       }
  //     },
  //     {
  //       name: '单选框',
  //       icon: 't-danxuankuang',
  //       pen: {
  //         name: 'radio',
  //         width: 150,
  //         height: 30,
  //         disableAnchor: true,
  //         direction: 'horizontal', // 'vertical', //'horizontal',
  //         form: [
  //           {
  //             key: 'options',
  //             name: '选项',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           },
  //           {
  //             key: 'direction',
  //             name: '方向',
  //             type: 'select',
  //             options: [
  //               {
  //                 label: '水平',
  //                 value: 'horizontal'
  //               },
  //               {
  //                 label: '垂直',
  //                 value: 'vertical'
  //               }
  //             ]
  //           },
  //           {
  //             key: 'checked',
  //             name: '选择项',
  //             type: 'text'
  //           }
  //         ],
  //         options: [{ text: '选项一', isForbidden: true }, { text: '选项二' }, { text: '选项三' }],
  //         checked: '选项二'
  //       }
  //     },
  //     {
  //       name: '开关',
  //       icon: 't-kaiguan',
  //       pen: {
  //         name: 'switch',
  //         disableAnchor: true,
  //         height: 30,
  //         width: 60,
  //         checked: true,
  //         offColor: '#BFBFBF',
  //         onColor: '#1890ff',
  //         disableOffColor: '#E5E5E5',
  //         disableOnColor: '#A3D3FF',
  //         hoverBackground: '#40a9ff',
  //         form: [
  //           {
  //             key: 'checked',
  //             name: '开关状态',
  //             type: 'switch'
  //           }
  //         ]
  //       }
  //     },
  //     {
  //       name: '进度条',
  //       icon: 't-jindutiao',
  //       pen: {
  //         anchors: [],
  //         disableAnchor: true,
  //         name: 'slider',
  //         x: 400,
  //         y: 400,
  //         width: 300,
  //         height: 20,
  //         value: 10,
  //         textWidth: 50,
  //         barHeight: 4, //修改无效
  //         min: 0,
  //         max: 100,
  //         color: '#1890ff',
  //         background: '#D4D6D9',
  //         textColor: '#222222',
  //         unit: '%',
  //         form: [
  //           //TODO 添加最大最小
  //           {
  //             key: 'value',
  //             name: '当前进度值',
  //             type: 'number',
  //             min: 0,
  //             max: 100
  //           },
  //           {
  //             key: 'unit',
  //             name: '显示单位',
  //             type: 'text'
  //           },
  //           {
  //             key: 'textColor',
  //             name: '文字颜色',
  //             type: 'color'
  //           }
  //         ]
  //       }
  //     },
  //     {
  //       name: '按钮',
  //       icon: 't-anniu',
  //       pen: {
  //         name: 'rectangle',
  //         x: 300,
  //         y: 200,
  //         width: 80,
  //         height: 30,
  //         disableAnchor: true,
  //         borderRadius: 2,
  //         target: 'mind',
  //         text: '按钮',
  //         activeBackground: '#40a9ff',
  //         activeColor: '#40a9ff',
  //         background: '#1890ff',
  //         color: '#1890ff',
  //         hoverBackground: '#40a9ff',
  //         hoverColor: '#40a9ff',
  //         textColor: '#ffffff',
  //         hoverTextColor: '#ffffff',
  //         activeTextColor: '#ffffff'
  //       }
  //     },
  //     {
  //       name: '输入框',
  //       icon: 't-shurukuang',
  //       pen: {
  //         x: 100,
  //         y: 100,
  //         height: 40,
  //         width: 200,
  //         target: 'mind',
  //         disableAnchor: true,
  //         name: 'rectangle',
  //         borderRadius: 0.05,
  //         input: true,
  //         ellipsis: true,
  //         text: '输入数据',
  //         textAlign: 'left',
  //         color: '#D9D9D9FF',
  //         textColor: '#000000FF',
  //         hoverTextColor: '#000000FF',
  //         activeTextColor: '#000000FF',
  //         textLeft: 10
  //       }
  //     },
  //     {
  //       name: '选择器',
  //       icon: 't-xuanzeqi',
  //       pen: {
  //         x: 100,
  //         y: 100,
  //         height: 40,
  //         width: 200,
  //         disableAnchor: true,
  //         name: 'rectangle',
  //         borderRadius: 0.05,
  //         ellipsis: true,
  //         text: '选项1',
  //         textAlign: 'left',
  //         input: true,
  //         color: '#D9D9D9FF',
  //         textColor: '#000000FF',
  //         hoverTextColor: '#000000FF',
  //         activeTextColor: '#000000FF',
  //         textLeft: 10,
  //         dropdownList: [
  //           {
  //             text: '选项1'
  //           },
  //           {
  //             text: '选项2'
  //           },
  //           {
  //             text: '选项3'
  //           }
  //         ],
  //         form: [
  //           {
  //             key: 'text',
  //             name: '选择项',
  //             type: 'text'
  //           }
  //         ]
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: '脑图',
  //   icons: [
  //     {
  //       name: '主题',
  //       icon: 't-zhuti',
  //       pen: {
  //         text: '主题',
  //         width: 200,
  //         height: 50,
  //         name: 'mindNode2',
  //         lineWidth: 3,
  //         color: '#ff4000',
  //         textColor: '#000',
  //         fontSize: 16,
  //         borderRadius: 0.5
  //       }
  //     },
  //     {
  //       name: '子主题',
  //       icon: 't-zizhuti',
  //       pen: {
  //         text: '子主题',
  //         width: 160,
  //         height: 40,
  //         name: 'mindLine2'
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: '流程图',
  //   icons: [
  //     {
  //       name: '开始/结束',
  //       icon: 't-flow-start',
  //       id: 21,
  //       pen: {
  //         text: '开始/结束',
  //         width: 120,
  //         target: 'mind',
  //         height: 40,
  //         borderRadius: 0.5,
  //         name: 'rectangle'
  //       }
  //     },
  //     {
  //       name: '流程',
  //       icon: 't-rectangle',
  //       id: 22,
  //       pen: {
  //         text: '流程',
  //         width: 120,
  //         height: 40,
  //         name: 'rectangle'
  //       }
  //     },
  //     {
  //       name: '判定',
  //       icon: 't-diamond',
  //       id: 23,
  //       pen: {
  //         text: '判定',
  //         width: 120,
  //         height: 60,
  //         name: 'diamond'
  //       }
  //     },
  //     {
  //       name: '数据',
  //       icon: 't-flow-data',
  //       id: 24,
  //       pen: {
  //         text: '数据',
  //         width: 120,
  //         height: 50,
  //         name: 'flowData',
  //         offsetX: 0.14,
  //         form: [
  //           {
  //             key: 'offsetX',
  //             name: '斜率',
  //             type: 'number',
  //             min: 0,
  //             step: 0.1,
  //             placeholder: '<= 1 即宽度的比例'
  //           }
  //         ]
  //       }
  //     },
  //     {
  //       name: '准备',
  //       icon: 't-flow-ready',
  //       id: 25,
  //       pen: {
  //         text: '准备',
  //         width: 120,
  //         height: 50,
  //         name: 'hexagon',
  //         target: 'mind'
  //       }
  //     },
  //     {
  //       name: '子流程',
  //       icon: 't-flow-subprocess',
  //       id: 26,
  //       pen: {
  //         text: '子流程',
  //         width: 120,
  //         height: 50,
  //         name: 'flowSubprocess'
  //       }
  //     },
  //     {
  //       name: '数据库',
  //       icon: 't-db',
  //       id: 27,
  //       pen: {
  //         text: '数据库',
  //         width: 80,
  //         height: 120,
  //         name: 'flowDb'
  //       }
  //     },
  //     {
  //       name: '文档',
  //       icon: 't-flow-document',
  //       id: 28,
  //       pen: {
  //         text: '文档',
  //         width: 120,
  //         height: 100,
  //         name: 'flowDocument'
  //       }
  //     },
  //     {
  //       name: '内部存储',
  //       icon: 't-internal-storage',
  //       id: 29,
  //       pen: {
  //         text: '内部存储',
  //         width: 120,
  //         height: 80,
  //         name: 'flowInternalStorage'
  //       }
  //     },
  //     {
  //       name: '外部存储',
  //       icon: 't-extern-storage',
  //       id: 30,
  //       pen: {
  //         text: '外部存储',
  //         width: 120,
  //         height: 80,
  //         name: 'flowExternStorage'
  //       }
  //     },
  //     {
  //       name: '队列',
  //       icon: 't-flow-queue',
  //       id: 31,
  //       pen: {
  //         text: '队列',
  //         width: 100,
  //         height: 100,
  //         name: 'flowQueue'
  //       }
  //     },
  //     {
  //       name: '手动输入',
  //       icon: 't-flow-manually',
  //       id: 32,
  //       pen: {
  //         text: '手动输入',
  //         width: 120,
  //         height: 80,
  //         name: 'flowManually'
  //       }
  //     },
  //     {
  //       name: '展示',
  //       icon: 't-flow-display',
  //       id: 33,
  //       pen: {
  //         text: '展示',
  //         width: 120,
  //         height: 80,
  //         name: 'flowDisplay'
  //       }
  //     },
  //     {
  //       name: '并行模式',
  //       icon: 't-flow-parallel',
  //       id: 34,
  //       pen: {
  //         text: '并行模式',
  //         width: 120,
  //         height: 50,
  //         name: 'flowParallel'
  //       }
  //     },
  //     {
  //       name: '注释',
  //       icon: 't-flow-comment',
  //       id: 35,
  //       pen: {
  //         text: '注释',
  //         width: 100,
  //         height: 100,
  //         name: 'flowComment'
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: '活动图',
  //   icons: [
  //     {
  //       name: '开始',
  //       icon: 't-inital',
  //       id: 36,
  //       pen: {
  //         text: '',
  //         width: 30,
  //         height: 30,
  //         name: 'circle',
  //         background: '#555',
  //         lineWidth: 0
  //       }
  //     },
  //     {
  //       name: '结束',
  //       icon: 't-final',
  //       id: 37,
  //       pen: {
  //         width: 30,
  //         height: 30,
  //         name: 'activityFinal'
  //       }
  //     },
  //     {
  //       name: '活动',
  //       icon: 't-action',
  //       id: 38,
  //       pen: {
  //         text: '活动',
  //         width: 120,
  //         height: 50,
  //         borderRadius: 0.25,
  //         name: 'rectangle'
  //       }
  //     },
  //     {
  //       name: '决策/合并',
  //       icon: 't-diamond',
  //       id: 39,
  //       pen: {
  //         text: '决策/合并',
  //         width: 120,
  //         height: 50,
  //         name: 'diamond'
  //       }
  //     },
  //     {
  //       name: '垂直泳道',
  //       icon: 't-swimlane-v',
  //       id: 40,
  //       pen: {
  //         text: '垂直泳道',
  //         width: 200,
  //         height: 500,
  //         name: 'swimlaneV',
  //         textBaseline: 'top',
  //         textTop: 20,
  //         // textHeight: ,
  //         lineTop: 0.08
  //       }
  //     },
  //     {
  //       name: '水平泳道',
  //       icon: 't-swimlane-h',
  //       id: 41,
  //       pen: {
  //         text: '水平泳道',
  //         width: 500,
  //         height: 200,
  //         name: 'swimlaneH',
  //         textWidth: 0.01,
  //         textLeft: 0.04,
  //         textAlign: 'left',
  //         lineLeft: 0.08
  //       }
  //     },
  //     {
  //       name: '垂直分岔/汇合',
  //       icon: 't-fork-v',
  //       id: 42,
  //       pen: {
  //         text: '垂直分岔/汇合',
  //         width: 10,
  //         height: 150,
  //         name: 'forkV',
  //         fillStyle: '#555',
  //         strokeStyle: 'transparent'
  //       }
  //     },
  //     {
  //       name: '水平分岔/汇合',
  //       icon: 't-fork',
  //       id: 43,
  //       pen: {
  //         text: '水平分岔/汇合',
  //         width: 150,
  //         height: 10,
  //         name: 'forkH',
  //         fillStyle: '#555',
  //         strokeStyle: 'transparent'
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: '时序图和类图',
  //   icons: [
  //     {
  //       name: '生命线',
  //       icon: 't-lifeline',
  //       id: 44,
  //       pen: {
  //         text: '生命线',
  //         width: 150,
  //         height: 400,
  //         textHeight: 50,
  //         name: 'lifeline'
  //       }
  //     },
  //     {
  //       name: '激活',
  //       icon: 't-focus',
  //       id: 45,
  //       pen: {
  //         text: '激活',
  //         width: 12,
  //         height: 200,
  //         name: 'sequenceFocus'
  //       }
  //     },
  //     {
  //       name: '简单类',
  //       icon: 't-simple-class',
  //       id: 46,
  //       pen: {
  //         text: 'Topolgoy',
  //         width: 270,
  //         height: 200,
  //         textHeight: 200,
  //         name: 'simpleClass',
  //         textAlign: 'center',
  //         textBaseline: 'top',
  //         textTop: 10,
  //         list: [
  //           {
  //             text: '- name: string\n+ setName(name: string): void'
  //           }
  //         ]
  //       }
  //     },
  //     {
  //       name: '类',
  //       icon: 't-class',
  //       id: 47,
  //       pen: {
  //         text: 'Topolgoy',
  //         width: 270,
  //         height: 200,
  //         textHeight: 200,
  //         name: 'interfaceClass',
  //         textAlign: 'center',
  //         textBaseline: 'top',
  //         textTop: 10,
  //         list: [
  //           {
  //             text: '- name: string'
  //           },
  //           {
  //             text: '+ setName(name: string): void'
  //           }
  //         ]
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: 'Echarts图表',
  //   icons: [
  //     {
  //       name: '折线图',
  //       icon: 't-line-chart',
  //       pen: {
  //         name: 'echarts',
  //         width: 400,
  //         height: 300,
  //         externElement: true,
  //         disableAnchor: true,
  //         echarts: {
  //           name: 'lineChart',
  //           option: {
  //             grid: {
  //               top: 10,
  //               bottom: 50,
  //               left: 40,
  //               right: 5
  //             },
  //             dataZoom: [
  //               {
  //                 height: 16,
  //                 bottom: 10
  //               }
  //             ],
  //             tooltip: {
  //               trigger: 'axis',
  //               axisPointer: {
  //                 // 坐标轴指示器，坐标轴触发有效
  //                 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  //               }
  //             },
  //             xAxis: {
  //               type: 'category',
  //               data: [],
  //               axisLabel: {
  //                 fontSize: 12
  //               }
  //             },
  //             yAxis: {
  //               type: 'value',
  //               axisLabel: {
  //                 fontSize: 12
  //               }
  //             },
  //             series: [
  //               {
  //                 data: [],
  //                 type: 'line'
  //               }
  //             ]
  //           },
  //           replaceMode: 2,
  //           max: 100
  //         }
  //       }
  //     },
  //     {
  //       name: '柱状图',
  //       icon: 't-bar-chart',
  //       pen: {
  //         width: 300,
  //         height: 200,
  //         disableAnchor: true,
  //         externElement: true,
  //         name: 'echarts',
  //         echarts: {
  //           name: 'barChart',
  //           option: {
  //             color: ['#1890ff', '#2FC25B', '#FACC14', '#c23531', '#2f4554', '#61a0a8', '#d48265'],
  //             tooltip: {
  //               trigger: 'axis',
  //               axisPointer: {
  //                 // 坐标轴指示器，坐标轴触发有效
  //                 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  //               }
  //             },
  //             grid: {
  //               left: '3%',
  //               right: '4%',
  //               bottom: '3%',
  //               containLabel: true
  //             },
  //             xAxis: {
  //               type: 'category',
  //               data: [],
  //               axisTick: {
  //                 alignWithLabel: true
  //               }
  //             },
  //             yAxis: [
  //               {
  //                 type: 'value'
  //               }
  //             ],
  //             series: [
  //               {
  //                 name: '',
  //                 type: 'bar',
  //                 barWidth: '50%',
  //                 data: []
  //               }
  //             ]
  //           },
  //           replaceMode: 2,
  //           max: 100
  //         }
  //       }
  //     },
  //     {
  //       name: '饼图',
  //       icon: 't-pie-chart',
  //       pen: {
  //         width: 200,
  //         height: 200,
  //         disableAnchor: true,
  //         externElement: true,
  //         name: 'echarts',
  //         echarts: {
  //           name: 'pieChart',
  //           option: {
  //             tooltip: {
  //               trigger: 'item',
  //               // formatter: '{a} <br/>{b}: {c} ({d}%)'
  //             },
  //             legend: {},
  //             series: [
  //               {
  //                 name: '',
  //                 type: 'pie',
  //                 radius: ['50%', '70%'],
  //                 avoidLabelOverlap: false,
  //                 label: {
  //                   normal: {
  //                     show: false,
  //                     position: 'center'
  //                   },
  //                   emphasis: {
  //                     show: true,
  //                     textStyle: {
  //                       fontSize: '30',
  //                       fontWeight: 'bold'
  //                     }
  //                   }
  //                 },
  //                 labelLine: {
  //                   normal: {
  //                     show: false
  //                   }
  //                 },
  //                 data: [
  //                   { value: 1048, name: 'Baidu' },
  //                   { value: 335, name: 'Direct' },
  //                   { value: 310, name: 'Email' },
  //                   { value: 251, name: 'Google' },
  //                   { value: 234, name: 'Union Ads' },
  //                   { value: 147, name: 'Bing' },
  //                   { value: 135, name: 'Video Ads' },
  //                   { value: 102, name: 'Others' }
  //                 ]
  //               }
  //             ]
  //           },
  //           replaceMode: 2
  //         },
  //       }
  //     },
  //     {
  //       name: '仪表盘',
  //       icon: 't-dashboard-chart',
  //       pen: {
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         name: 'echarts',
  //         echarts: {
  //           name: 'dashboardChart',
  //           option: {
  //             tooltip: {
  //               formatter: '{a} <br/>{b} : {c}%'
  //             },
  //             series: [
  //               {
  //                 name: '',
  //                 type: 'gauge',
  //                 detail: { formatter: '{value}%' },
  //                 data: [{ value: 0, name: '' }]
  //               }
  //             ]
  //           },
  //           replaceMode: 2
  //         }
  //       }
  //     },
  //     // {
  //     //   name: '时钟',
  //     //   icon: 't-dashboard-chart',
  //     //   pen: {
  //     //     width: 300,
  //     //     height: 300,
  //     //     disableAnchor: true,
  //     //     externElement: true,
  //     //     name: 'echarts',
  //     //     echarts: {
  //     //       name: 'dashboardChart',
  //     //       option: {
  //     //         series: [
  //     //           {
  //     //             name: 'hour',
  //     //             type: 'gauge',
  //     //             startAngle: 90,
  //     //             endAngle: -270,
  //     //             min: 0,
  //     //             max: 12,
  //     //             splitNumber: 12,
  //     //             clockwise: true,
  //     //             axisLine: {
  //     //               lineStyle: {
  //     //                 width: 15,
  //     //                 color: [[1, 'rgba(0,0,0,0.7)']],
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.5)',
  //     //                 shadowBlur: 15
  //     //               }
  //     //             },
  //     //             splitLine: {
  //     //               lineStyle: {
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 3,
  //     //                 shadowOffsetX: 1,
  //     //                 shadowOffsetY: 2
  //     //               }
  //     //             },
  //     //             axisLabel: {
  //     //               fontSize: 50,
  //     //               distance: 25,
  //     //               formatter: `(value) => { return value === 0 ? '' : value }`
  //     //               // formatter: `{value}`
  //     //             },
  //     //             // anchor: {
  //     //             //   show: true,
  //     //             //   icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
  //     //             //   showAbove: false,
  //     //             //   offsetCenter: [0, '-35%'],
  //     //             //   size: 120,
  //     //             //   keepAspect: true,
  //     //             //   itemStyle: {
  //     //             //     color: '#707177'
  //     //             //   }
  //     //             // },
  //     //             pointer: {
  //     //               icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
  //     //               width: 12,
  //     //               length: '55%',
  //     //               offsetCenter: [0, '8%'],
  //     //               itemStyle: {
  //     //                 color: '#C0911F',
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 8,
  //     //                 shadowOffsetX: 2,
  //     //                 shadowOffsetY: 4
  //     //               }
  //     //             },
  //     //             detail: {
  //     //               show: false
  //     //             },
  //     //             title: {
  //     //               offsetCenter: [0, '30%']
  //     //             },
  //     //             data: [
  //     //               {
  //     //                 value: 0
  //     //               }
  //     //             ]
  //     //           },
  //     //           {
  //     //             name: 'minute',
  //     //             type: 'gauge',
  //     //             startAngle: 90,
  //     //             endAngle: -270,
  //     //             min: 0,
  //     //             max: 60,
  //     //             clockwise: true,
  //     //             axisLine: {
  //     //               show: false
  //     //             },
  //     //             splitLine: {
  //     //               show: false
  //     //             },
  //     //             axisTick: {
  //     //               show: false
  //     //             },
  //     //             axisLabel: {
  //     //               show: false
  //     //             },
  //     //             pointer: {
  //     //               icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
  //     //               width: 8,
  //     //               length: '70%',
  //     //               offsetCenter: [0, '8%'],
  //     //               itemStyle: {
  //     //                 color: '#C0911F',
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 8,
  //     //                 shadowOffsetX: 2,
  //     //                 shadowOffsetY: 4
  //     //               }
  //     //             },
  //     //             anchor: {
  //     //               show: true,
  //     //               size: 20,
  //     //               showAbove: false,
  //     //               itemStyle: {
  //     //                 borderWidth: 15,
  //     //                 borderColor: '#C0911F',
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 8,
  //     //                 shadowOffsetX: 2,
  //     //                 shadowOffsetY: 4
  //     //               }
  //     //             },
  //     //             detail: {
  //     //               show: false
  //     //             },
  //     //             title: {
  //     //               offsetCenter: ['0%', '-40%']
  //     //             },
  //     //             data: [
  //     //               {
  //     //                 value: 0
  //     //               }
  //     //             ]
  //     //           },
  //     //           {
  //     //             name: 'second',
  //     //             type: 'gauge',
  //     //             startAngle: 90,
  //     //             endAngle: -270,
  //     //             min: 0,
  //     //             max: 60,
  //     //             animationEasingUpdate: 'bounceOut',
  //     //             clockwise: true,
  //     //             axisLine: {
  //     //               show: false
  //     //             },
  //     //             splitLine: {
  //     //               show: false
  //     //             },
  //     //             axisTick: {
  //     //               show: false
  //     //             },
  //     //             axisLabel: {
  //     //               show: false
  //     //             },
  //     //             pointer: {
  //     //               icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
  //     //               width: 4,
  //     //               length: '85%',
  //     //               offsetCenter: [0, '8%'],
  //     //               itemStyle: {
  //     //                 color: '#C0911F',
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 8,
  //     //                 shadowOffsetX: 2,
  //     //                 shadowOffsetY: 4
  //     //               }
  //     //             },
  //     //             anchor: {
  //     //               show: true,
  //     //               size: 15,
  //     //               showAbove: true,
  //     //               itemStyle: {
  //     //                 color: '#C0911F',
  //     //                 shadowColor: 'rgba(0, 0, 0, 0.3)',
  //     //                 shadowBlur: 8,
  //     //                 shadowOffsetX: 2,
  //     //                 shadowOffsetY: 4
  //     //               }
  //     //             },
  //     //             detail: {
  //     //               show: false
  //     //             },
  //     //             title: {
  //     //               offsetCenter: ['0%', '-40%']
  //     //             },
  //     //             data: [
  //     //               {
  //     //                 value: 0
  //     //               }
  //     //             ]
  //     //           }
  //     //         ]
  //     //       },
  //     //       replaceMode: 2
  //     //     },
  //     //     form: [
  //     //       {
  //     //         key: "dataY",
  //     //         dataIds: [
  //     //           { dataId: "LocHour", name: "hour" },
  //     //           { dataId: "LocMin", name: "minute" },
  //     //           { dataId: "LocSec", name: "second" },
  //     //         ]
  //     //       }
  //     //     ],
  //     //   }
  //     // },
  //     {
  //       name: '鱼型水波图',
  //       icon: 't-dashboard-chart',
  //       pen: {
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         name: 'echarts',
  //         echarts: {
  //           name: '',
  //           option: {
  //             series: [
  //               {
  //                 name: '自定义盒子',
  //                 type: 'liquidFill',
  //                 phase: 0.1,
  //                 amplitude: 10,
  //                 data: [
  //                   {
  //                     value: 0.5,
  //                     name: '2-1',
  //                     itemStyle: {
  //                       color: '#136CEA'
  //                     }
  //                   },
  //                   // {
  //                   //   value: 0.4,
  //                   //   name: '2-2',
  //                   //   itemStyle: {
  //                   //     color: '#4D8EE8'
  //                   //   }
  //                   // }
  //                 ],

  //                 shape: `path://M9110 6363 c775 40 1482 284 2240 776 556 360 1011 738
  //                     // 1945 1617 668 629 894 831 1195 1066 644 504 1159 708 1619 640
  //                     // 63 -10 119 -19 123 -22 4 -3 -3 -27 -17 -53 -93 -184 -526 -596 -1005 -956 -179 -134 -200
  //                     // -160 -200 -241 0 -56 27 -104 74 -133 36 -23 149 -40 451 -68 238 -22 895 -25
  //                     // 1045 -5 158 22 358 63 426 89 7 3 13 -32 18 -104 16 -259 84 -682
  //                     // 162 -1022 84 -363 241 -885 286 -951 47 -69 138 -89 213 -47 54 30 84 94
  //                     // 179 377 118 355 208 710 271 1070 60 346 79 569 79 920 0 319
  //                     // -12 466 -60 713 -146 750 -550 1304 -1182 1621 -308 154 -628 244 -1087 303
  //                     // -116 15 -320 17 -1951 20 l-1821 4 -7 67 c-16 163 -78 315 -168 417 -287 322
  //                     // -851 295 -1698 -82 -157 -70 -525 -257 -683 -347 l-99 -56 -1386 0 c-1315 0 -1392 -1 -1477
  //                     // -19 -365 -76 -671 -346 -899 -794 -116 -228 -159 -367 -210 -684 -46 -280 -60 -472 -60 -818 0
  //                     // -325 11 -491 50 -725 214 -1283 969 -2112 2214 -2429 308 -78 636 -124 1020
  //                     // -141 215 -9 276 -10 400 -3z`,
  //                 radius: '95%',
  //                 // 波浪颜色
  //                 itemStyle: {
  //                   shadowBlur: 5
  //                 },
  //                 backgroundStyle: {
  //                   borderWidth: 5,
  //                   borderColor: '#056CFC'
  //                 },

  //                 outline: {
  //                   show: false
  //                 },
  //                 // 水波图标签配置
  //                 label: {
  //                   show: true,
  //                   align: 'center',
  //                   distance: 50,
  //                   color: '#05FCF6',
  //                   fontSize: 32,
  //                   insideColor: 'red'
  //                 }
  //               }
  //             ]
  //           },
  //           replaceMode: 2,
  //           max: 100
  //         },
  //         form: [
  //           {
  //             key: "dataY",
  //             dataIds: [
  //               { dataId: "2-2", name: '2-2' },
  //               { dataId: "2-1", name: '2-1' },
  //             ]
  //           }
  //         ],
  //       }
  //     },
  //     {
  //       name: '球形水波图',
  //       icon: 't-dashboard-chart',
  //       pen: {
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         name: 'echarts',
  //         echarts: {
  //           name: '',
  //           option: {
  //             series: [
  //               {
  //                 name: '自定义盒子',
  //                 type: 'liquidFill',
  //                 phase: 0.1,
  //                 amplitude: 10,
  //                 data: [
  //                   {
  //                     value: 0.5,
  //                     name: '2-1',
  //                     itemStyle: {
  //                       color: '#136CEA'
  //                     }
  //                   },
  //                   // {
  //                   //   value: 0.4,
  //                   //   name: '2-2',
  //                   //   itemStyle: {
  //                   //     color: '#4D8EE8'
  //                   //   }
  //                   // }
  //                 ],
  //                 shape: 'circle', // 水球形状  'circle'， 'rect'， 'roundRect'， 'triangle'， 'diamond'， 'pin'， 'arrow'，'container'
  //                 // 波浪颜色
  //                 itemStyle: {
  //                   shadowBlur: 5
  //                 },
  //                 backgroundStyle: {
  //                   borderWidth: 5,
  //                   borderColor: '#056CFC'
  //                 },

  //                 outline: {
  //                   show: false
  //                 },
  //                 // 水波图标签配置
  //                 label: {
  //                   show: true,
  //                   align: 'center',
  //                   distance: 50,
  //                   color: '#05FCF6',
  //                   fontSize: 32,
  //                   insideColor: 'red'
  //                 }
  //               }
  //             ]
  //           },
  //           replaceMode: 2,
  //           max: 100
  //         },
  //         form: [
  //           {
  //             key: "dataY",
  //             dataIds: [
  //               // { dataId: "2-2", name: '2-2' },
  //               { dataId: "2-1", name: '2-1' },
  //             ]
  //           }
  //         ],
  //       }
  //     },
  //   ]
  // }
  // {
  //   groupName: 'Highcharts图表',
  //   icons: [
  //     {
  //       name: '折线图',
  //       icon: 't-line-chart',
  //       pen: {
  //         name: 'highcharts',
  //         width: 400,
  //         height: 200,
  //         disableAnchor: true,
  //         externElement: true,
  //         highcharts: {
  //           option: {
  //             chart: {
  //               backgroundColor: '#ffffff00'
  //             },
  //             credits: {
  //               enabled: false
  //             },
  //             xAxis: {
  //               categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //             },
  //             yAxis: {
  //               type: 'value'
  //             },
  //             series: [
  //               {
  //                 data: [820, 932, 901, 934, 1290, 1330, 1320],
  //                 type: 'line'
  //               }
  //             ]
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '柱状图',
  //       icon: 't-bar-chart',
  //       pen: {
  //         name: 'highcharts',
  //         width: 400,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'highcharts',
  //             name: 'highcharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         highcharts: {
  //           option: {
  //             chart: {
  //               backgroundColor: '#ffffff00',
  //               type: 'column'
  //             },
  //             title: {
  //               text: '月平均降雨量'
  //             },
  //             subtitle: {
  //               text: '数据来源: WorldClimate.com'
  //             },
  //             xAxis: {
  //               categories: [
  //                 '一月',
  //                 '二月',
  //                 '三月',
  //                 '四月',
  //                 '五月',
  //                 '六月',
  //                 '七月',
  //                 '八月',
  //                 '九月',
  //                 '十月',
  //                 '十一月',
  //                 '十二月'
  //               ],
  //               crosshair: true
  //             },
  //             yAxis: {
  //               min: 0,
  //               title: {
  //                 text: '降雨量 (mm)'
  //               }
  //             },
  //             tooltip: {
  //               // head + 每个 point + footer 拼接成完整的 table
  //               headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  //               pointFormat:
  //                 '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  //                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
  //               footerFormat: '</table>',
  //               shared: true,
  //               useHTML: true
  //             },
  //             plotOptions: {
  //               column: {
  //                 borderWidth: 0
  //               }
  //             },
  //             series: [
  //               {
  //                 name: '东京',
  //                 data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  //               },
  //               {
  //                 name: '纽约',
  //                 data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  //               },
  //               {
  //                 name: '伦敦',
  //                 data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  //               },
  //               {
  //                 name: '柏林',
  //                 data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  //               }
  //             ]
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '饼图',
  //       icon: 't-pie-chart',
  //       pen: {
  //         name: 'highcharts',
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'highcharts',
  //             name: 'highcharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         highcharts: {
  //           option: {
  //             chart: {
  //               backgroundColor: '#ffffff00',
  //               plotBackgroundColor: null,
  //               plotBorderWidth: null,
  //               plotShadow: false,
  //               type: 'pie'
  //             },
  //             title: {
  //               text: '2018年1月浏览器市场份额'
  //             },
  //             tooltip: {
  //               pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  //             },
  //             plotOptions: {
  //               pie: {
  //                 allowPointSelect: true,
  //                 cursor: 'pointer',
  //                 dataLabels: {
  //                   enabled: true,
  //                   format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  //                   style: {
  //                     color: 'black'
  //                   }
  //                 }
  //               }
  //             },
  //             series: [
  //               {
  //                 name: 'Brands',
  //                 colorByPoint: true,
  //                 data: [
  //                   {
  //                     name: 'Chrome',
  //                     y: 61.41,
  //                     sliced: true,
  //                     selected: true
  //                   },
  //                   {
  //                     name: 'Internet Explorer',
  //                     y: 11.84
  //                   },
  //                   {
  //                     name: 'Firefox',
  //                     y: 10.85
  //                   },
  //                   {
  //                     name: 'Edge',
  //                     y: 4.67
  //                   },
  //                   {
  //                     name: 'Safari',
  //                     y: 4.18
  //                   },
  //                   {
  //                     name: 'Sogou Explorer',
  //                     y: 1.64
  //                   },
  //                   {
  //                     name: 'Opera',
  //                     y: 1.6
  //                   },
  //                   {
  //                     name: 'QQ',
  //                     y: 1.2
  //                   },
  //                   {
  //                     name: 'Other',
  //                     y: 2.61
  //                   }
  //                 ]
  //               }
  //             ]
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '仪表盘',
  //       icon: 't-dashboard-chart',
  //       pen: {
  //         name: 'highcharts',
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         form: [
  //           {
  //             key: 'highcharts',
  //             name: 'highcharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         externElement: true,
  //         highcharts: {
  //           option: {
  //             chart: {
  //               type: 'gauge',
  //               plotBackgroundColor: null,
  //               plotBackgroundImage: null,
  //               plotBorderWidth: 0,
  //               plotShadow: false,
  //               backgroundColor: '#ffffff00'
  //             },
  //             title: {
  //               text: '速度仪'
  //             },
  //             pane: {
  //               startAngle: -150,
  //               endAngle: 150,
  //               background: [
  //                 {
  //                   backgroundColor: {
  //                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  //                     stops: [
  //                       [0, '#FFF'],
  //                       [1, '#333']
  //                     ]
  //                   },
  //                   borderWidth: 0,
  //                   outerRadius: '109%'
  //                 },
  //                 {
  //                   backgroundColor: {
  //                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  //                     stops: [
  //                       [0, '#333'],
  //                       [1, '#FFF']
  //                     ]
  //                   },
  //                   borderWidth: 1,
  //                   outerRadius: '107%'
  //                 },
  //                 {
  //                   // default background
  //                 },
  //                 {
  //                   backgroundColor: '#DDD',
  //                   borderWidth: 0,
  //                   outerRadius: '105%',
  //                   innerRadius: '103%'
  //                 }
  //               ]
  //             },
  //             // the value axis
  //             yAxis: {
  //               min: 0,
  //               max: 200,
  //               minorTickInterval: 'auto',
  //               minorTickWidth: 1,
  //               minorTickLength: 10,
  //               minorTickPosition: 'inside',
  //               minorTickColor: '#666',
  //               tickPixelInterval: 30,
  //               tickWidth: 2,
  //               tickPosition: 'inside',
  //               tickLength: 10,
  //               tickColor: '#666',
  //               labels: {
  //                 step: 2,
  //                 rotation: 'auto'
  //               },
  //               title: {
  //                 text: 'km/h'
  //               },
  //               plotBands: [
  //                 {
  //                   from: 0,
  //                   to: 120,
  //                   color: '#55BF3B' // green
  //                 },
  //                 {
  //                   from: 120,
  //                   to: 160,
  //                   color: '#DDDF0D' // yellow
  //                 },
  //                 {
  //                   from: 160,
  //                   to: 200,
  //                   color: '#DF5353' // red
  //                 }
  //               ]
  //             },
  //             series: [
  //               {
  //                 name: 'Speed',
  //                 data: [80],
  //                 tooltip: {
  //                   valueSuffix: ' km/h'
  //                 }
  //               }
  //             ]
  //           }
  //         }
  //       }
  //     }
  //   ]
  // },
  // {
  //   groupName: 'LightningChart图表',
  //   icons: [
  //     {
  //       name: '折线图',
  //       icon: 't-line-chart',
  //       pen: {
  //         name: 'lightningCharts',
  //         width: 400,
  //         height: 200,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'lightningCharts',
  //             name: 'lightningCharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         lightningCharts: {
  //           option: {
  //             type: 'line',
  //             //主题参考 https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/interfaces/themes.html
  //             theme: 'darkGreen',
  //             data: [
  //               {
  //                 name: 'Sports Car',
  //                 data: [
  //                   { x: 0, y: 0 },
  //                   { x: 50, y: 10 },
  //                   { x: 80, y: 20 },
  //                   { x: 100, y: 30 },
  //                   { x: 150, y: 40 },
  //                   { x: 180, y: 50 },
  //                   { x: 230, y: 60 },
  //                   { x: 290, y: 70 }
  //                 ]
  //               },
  //               {
  //                 name: 'Family Car',
  //                 data: [
  //                   { x: 0, y: 0 },
  //                   { x: 100, y: 10 },
  //                   { x: 230, y: 20 },
  //                   { x: 390, y: 30 },
  //                   { x: 470, y: 40 },
  //                   { x: 540, y: 50 },
  //                   { x: 600, y: 60 },
  //                   { x: 800, y: 70 }
  //                 ]
  //               },
  //               {
  //                 name: 'Pick-up Car',
  //                 data: [
  //                   { x: 0, y: 0 },
  //                   { x: 80, y: 10 },
  //                   { x: 100, y: 20 },
  //                   { x: 150, y: 30 },
  //                   { x: 230, y: 40 },
  //                   { x: 380, y: 50 },
  //                   { x: 450, y: 60 },
  //                   { x: 580, y: 70 }
  //                 ]
  //               }
  //             ],
  //             title: 'title'
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '柱状图',
  //       icon: 't-bar-chart',
  //       pen: {
  //         name: 'lightningCharts',
  //         width: 400,
  //         height: 200,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'lightningCharts',
  //             name: 'lightningCharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         lightningCharts: {
  //           option: {
  //             type: 'bar',
  //             theme: 'darkGreen',
  //             groups: ['Finland', 'Germany', 'UK'],
  //             categories: ['Engineers', 'Sales', 'Marketing'],
  //             data: [
  //               [48, 27, 24],
  //               [19, 40, 14],
  //               [33, 33, 62]
  //             ],
  //             title: 'My first chart',
  //             yTitle: '纵坐标'
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '饼图',
  //       icon: 't-pie-chart',
  //       pen: {
  //         name: 'lightningCharts',
  //         width: 600,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'lightningCharts',
  //             name: 'lightningCharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         lightningCharts: {
  //           option: {
  //             type: 'pie',
  //             innerRadius: 50,
  //             data: [
  //               {
  //                 name: 'Planning',
  //                 value: 40
  //               },
  //               {
  //                 name: 'Development',
  //                 value: 120
  //               },
  //               {
  //                 name: 'Testing',
  //                 value: 60
  //               },
  //               {
  //                 name: 'Review',
  //                 value: 24
  //               },
  //               {
  //                 name: 'Bug Fixing',
  //                 value: 90
  //               }
  //             ]
  //           }
  //         }
  //       }
  //     },
  //     {
  //       name: '仪表盘',
  //       icon: 't-dashboard-chart',
  //       pen: {
  //         name: 'lightningCharts',
  //         width: 300,
  //         height: 300,
  //         disableAnchor: true,
  //         externElement: true,
  //         form: [
  //           {
  //             key: 'lightningCharts',
  //             name: 'lightningCharts',
  //             type: 'code',
  //             language: 'json',
  //             isNotString: true
  //           }
  //         ],
  //         lightningCharts: {
  //           option: {
  //             type: 'gauge',
  //             data: 80,
  //             title: '进度条',
  //             startAngle: 90,
  //             endAngle: -270,
  //             background: '#0000ff'
  //           }
  //         }
  //       }
  //     }
  //   ]
  // }
]
export const TopoIcons: IconGroup[] = [
  {
    groupName: '管线',
    icons: [
      {
        name: '管线1',
        img: getURL('/topo/pipe/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线2',
        img: getURL('/topo/pipe/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线3',
        img: getURL('/topo/pipe/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线4',
        img: getURL('/topo/pipe/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线5',
        img: getURL('/topo/pipe/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线6',
        img: getURL('/topo/pipe/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线7',
        img: getURL('/topo/pipe/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线8',
        img: getURL('/topo/pipe/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线9',
        img: getURL('/topo/pipe/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线10',
        img: getURL('/topo/pipe/10.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/10.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线11',
        img: getURL('/topo/pipe/11.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/11.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线12',
        img: getURL('/topo/pipe/12.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/12.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线13',
        img: getURL('/topo/pipe/13.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/13.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线14',
        img: getURL('/topo/pipe/14.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/14.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '管线15',
        img: getURL('/topo/pipe/15.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/pipe/15.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '电力',
    icons: [
      {
        name: '电力1',
        img: getURL('/topo/electric/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力2',
        img: getURL('/topo/electric/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力3',
        img: getURL('/topo/electric/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力4',
        img: getURL('/topo/electric/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力5',
        img: getURL('/topo/electric/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力6',
        img: getURL('/topo/electric/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力7',
        img: getURL('/topo/electric/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力8',
        img: getURL('/topo/electric/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力9',
        img: getURL('/topo/electric/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力10',
        img: getURL('/topo/electric/10.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/10.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力11',
        img: getURL('/topo/electric/11.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/11.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力12',
        img: getURL('/topo/electric/12.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/12.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力13',
        img: getURL('/topo/electric/13.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/13.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力14',
        img: getURL('/topo/electric/14.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/14.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力15',
        img: getURL('/topo/electric/15.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/15.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力16',
        img: getURL('/topo/electric/16.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/16.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '电力17',
        img: getURL('/topo/electric/17.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/electric/17.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '风机',
    icons: [
      {
        name: '风机1',
        img: getURL('/topo/blower/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机2',
        img: getURL('/topo/blower/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机3',
        img: getURL('/topo/blower/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机4',
        img: getURL('/topo/blower/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机5',
        img: getURL('/topo/blower/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机6',
        img: getURL('/topo/blower/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机7',
        img: getURL('/topo/blower/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机8',
        img: getURL('/topo/blower/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机9',
        img: getURL('/topo/blower/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机10',
        img: getURL('/topo/blower/10.gif'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/10.gif'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机11',
        img: getURL('/topo/blower/11.gif'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/11.gif'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '风机12',
        img: getURL('/topo/blower/12.gif'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/blower/12.gif'),
          imageRatio: false,
          name: "gif",
        }
      }
    ]
  },
  {
    groupName: '阀门',
    icons: [
      {
        name: '阀门1',
        img: getURL('/topo/gate/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门2',
        img: getURL('/topo/gate/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门3',
        img: getURL('/topo/gate/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门4',
        img: getURL('/topo/gate/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门5',
        img: getURL('/topo/gate/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门6',
        img: getURL('/topo/gate/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门7',
        img: getURL('/topo/gate/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门8',
        img: getURL('/topo/gate/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门9',
        img: getURL('/topo/gate/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门10',
        img: getURL('/topo/gate/10.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/10.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门11',
        img: getURL('/topo/gate/11.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/11.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '阀门12',
        img: getURL('/topo/gate/12.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/gate/12.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '鼓风机',
    icons: [
      {
        name: '鼓风机1',
        img: getURL('/topo/twyer/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机2',
        img: getURL('/topo/twyer/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机3',
        img: getURL('/topo/twyer/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机4',
        img: getURL('/topo/twyer/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机5',
        img: getURL('/topo/twyer/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机6',
        img: getURL('/topo/twyer/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机7',
        img: getURL('/topo/twyer/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机8',
        img: getURL('/topo/twyer/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '鼓风机9',
        img: getURL('/topo/twyer/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/twyer/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '锅炉',
    icons: [
      {
        name: '锅炉1',
        img: getURL('/topo/boiler/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉2',
        img: getURL('/topo/boiler/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉3',
        img: getURL('/topo/boiler/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉4',
        img: getURL('/topo/boiler/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉5',
        img: getURL('/topo/boiler/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉6',
        img: getURL('/topo/boiler/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉7',
        img: getURL('/topo/boiler/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉8',
        img: getURL('/topo/boiler/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '锅炉9',
        img: getURL('/topo/boiler/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/boiler/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '冷却器',
    icons: [
      {
        name: '冷却器1',
        img: getURL('/topo/cooler/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器2',
        img: getURL('/topo/cooler/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器3',
        img: getURL('/topo/cooler/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器4',
        img: getURL('/topo/cooler/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器5',
        img: getURL('/topo/cooler/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器6',
        img: getURL('/topo/cooler/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器7',
        img: getURL('/topo/cooler/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器8',
        img: getURL('/topo/cooler/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '冷却器9',
        img: getURL('/topo/cooler/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/cooler/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '指示灯',
    icons: [
      {
        name: '指示灯1',
        img: getURL('/topo/light/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯2',
        img: getURL('/topo/light/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯3',
        img: getURL('/topo/light/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯4',
        img: getURL('/topo/light/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯5',
        img: getURL('/topo/light/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯6',
        img: getURL('/topo/light/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯7',
        img: getURL('/topo/light/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯8',
        img: getURL('/topo/light/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '指示灯9',
        img: getURL('/topo/light/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/light/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '仪表',
    icons: [
      {
        name: '仪表1',
        img: getURL('/topo/meter/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表2',
        img: getURL('/topo/meter/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表3',
        img: getURL('/topo/meter/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表4',
        img: getURL('/topo/meter/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表5',
        img: getURL('/topo/meter/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表6',
        img: getURL('/topo/meter/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表7',
        img: getURL('/topo/meter/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表8',
        img: getURL('/topo/meter/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '仪表9',
        img: getURL('/topo/meter/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/meter/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '马达',
    icons: [
      {
        name: '马达1',
        img: getURL('/topo/motor/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达2',
        img: getURL('/topo/motor/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达3',
        img: getURL('/topo/motor/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达4',
        img: getURL('/topo/motor/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达5',
        img: getURL('/topo/motor/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达6',
        img: getURL('/topo/motor/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达7',
        img: getURL('/topo/motor/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达8',
        img: getURL('/topo/motor/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '马达9',
        img: getURL('/topo/motor/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/motor/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '建筑',
    icons: [
      {
        name: '建筑1',
        img: getURL('/topo/build/1.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/1.png'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '建筑2',
        img: getURL('/topo/build/2.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/2.png'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '建筑3',
        img: getURL('/topo/build/3.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/3.png'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '建筑4',
        img: getURL('/topo/build/4.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/4.png'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '建筑5',
        img: getURL('/topo/build/5.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/5.png'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '建筑6',
        img: getURL('/topo/build/6.png'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/build/6.png'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
  {
    groupName: '污水',
    icons: [
      {
        name: '污水1',
        img: getURL('/topo/sewage/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/1.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水2',
        img: getURL('/topo/sewage/2.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/2.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水3',
        img: getURL('/topo/sewage/3.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/3.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水4',
        img: getURL('/topo/sewage/4.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/4.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水5',
        img: getURL('/topo/sewage/5.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/5.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水6',
        img: getURL('/topo/sewage/6.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/6.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水7',
        img: getURL('/topo/sewage/7.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/7.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水8',
        img: getURL('/topo/sewage/8.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/8.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水9',
        img: getURL('/topo/sewage/9.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/9.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水10',
        img: getURL('/topo/sewage/10.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/10.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水11',
        img: getURL('/topo/sewage/1.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/11.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水12',
        img: getURL('/topo/sewage/12.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/12.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水13',
        img: getURL('/topo/sewage/13.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/13.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水14',
        img: getURL('/topo/sewage/14.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/14.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水15',
        img: getURL('/topo/sewage/15.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/15.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水16',
        img: getURL('/topo/sewage/16.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/16.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水17',
        img: getURL('/topo/sewage/17.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/17.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水18',
        img: getURL('/topo/sewage/18.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/18.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水19',
        img: getURL('/topo/sewage/19.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/19.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水20',
        img: getURL('/topo/sewage/20.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/20.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水21',
        img: getURL('/topo/sewage/21.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/21.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水22',
        img: getURL('/topo/sewage/22.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/22.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水23',
        img: getURL('/topo/sewage/23.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/23.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水24',
        img: getURL('/topo/sewage/24.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/24.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水25',
        img: getURL('/topo/sewage/25.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/25.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水26',
        img: getURL('/topo/sewage/26.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/26.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
      {
        name: '污水27',
        img: getURL('/topo/sewage/27.svg'),
        pen: {
          height: 100,
          width: 100,
          image: getURL('/topo/sewage/27.svg'),
          imageRatio: false,
          name: "gif",
        }
      },
    ]
  },
]
